<template>
  <div class="app">
    <h2>全选 <input v-model="checkedAll" type="checkbox" /><button @click="ifchecked">反选</button></h2>
   
    <div :key="item.id" v-for="item in list" >
      <input type="checkbox" v-model="item.checked" >{{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      num: 100,
      list: [
        { id: 1, name: "八戒", checked: false },
        { id: 2, name: "悟空", checked: false },
        { id: 3, name: "唐僧", checked: true },
        { id: 4, name: "龙马", checked: false },
      ],
    };
  },

  methods: {
    ifchecked(){
        this.list.forEach(v=>v.checked=!v.checked)
    }
  },

  computed: {
    checkedAll: {
      get() {
        return this.list.filter(v=>v.checked).length===this.list.length
      },
      set(value) {
        console.log(value);
        return this.list.forEach(v=>v.checked=value)
      },
    },


  },
};
</script>

<style >
</style>